<template>
  <view class="patient-container">
    <!-- 头部 -->
    <view class="header">
      <text class="title">就诊人管理</text>
      <button class="add-btn" type="primary" @click="showAddDialog">添加就诊人</button>
    </view>

    <!-- 就诊人列表 -->
    <view class="patient-list">
      <view v-if="loading" class="loading">
        <text>加载中...</text>
      </view>
      
      <view v-else-if="patientList.length === 0" class="empty">
        <text>暂无就诊人信息</text>
      </view>
      
      <view v-else class="list-content">
        <view 
          v-for="(patient, index) in patientList" 
          :key="patient.id || index"
          class="patient-item"
        >
          <view class="patient-info">
            <view class="basic-info">
              <text class="name">{{ patient.name }}</text>
              <text class="gender">{{ getGenderText(patient.gender) }}</text>
              <text class="age">{{ patient.age }}岁</text>
            </view>
            <view class="contact-info">
              <text class="phone">电话：{{ patient.phone || '未填写' }}</text>
            </view>
            <view class="id-info">
              <text class="id-card">身份证：{{ patient.idCard || '未填写' }}</text>
            </view>
          </view>
          
          <view class="actions">
            <button class="action-btn edit" size="mini" @click="editPatient(patient)">编辑</button>
            <button class="action-btn delete" size="mini" @click="deletePatient(patient)">删除</button>
          </view>
        </view>
      </view>
    </view>


  </view>
</template>

<script>
export default {
  name: 'Patient',
  data() {
    return {
      loading: false,
      patientList: []
    }
  },
  
  onLoad() {
    this.getPatientList()
  },
  
  onShow() {
    this.getPatientList()
  },
  
  methods: {
    // 获取就诊人列表
    async getPatientList() {
      this.loading = true
      try {
        // 获取token
        const token = uni.getStorageSync('token')
        if (!token) {
          uni.showToast({
            title: '请先登录',
            icon: 'none'
          })
          return
        }
        
        const response = await uni.request({
          url: 'http://localhost:8080/patient/list',
          method: 'GET',
          header: {
            'Authorization': `Bearer ${token}`
          }
        })
        
        if (response.data.code === 200) {
          this.patientList = response.data.data || []
        } else {
          uni.showToast({
            title: response.data.message || '获取就诊人列表失败',
            icon: 'none'
          })
        }
      } catch (error) {
        uni.showToast({
          title: '获取就诊人列表失败',
          icon: 'none'
        })
        console.error(error)
      } finally {
        this.loading = false
      }
    },
    
    // 跳转到添加就诊人页面
    showAddDialog() {
      uni.navigateTo({
        url: '/pages/patient/add-patient'
      })
    },
    
    // 跳转到编辑就诊人页面
    editPatient(patient) {
      uni.navigateTo({
        url: `/pages/patient/edit-patient?id=${patient.id}`
      })
    },
    
    // 删除就诊人
    async deletePatient(patient) {
      uni.showModal({
        title: '提示',
        content: `确定要删除就诊人"${patient.name}"吗？`,
        success: async (res) => {
          if (res.confirm) {
            try {
              // 获取token
              const token = uni.getStorageSync('token')
              if (!token) {
                uni.showToast({
                  title: '请先登录',
                  icon: 'none'
                })
                return
              }
              
              const response = await uni.request({
                url: `http://localhost:8080/patient/${patient.id}`,
                method: 'DELETE',
                header: {
                  'Authorization': `Bearer ${token}`
                }
              })
              
              if (response.data.code === 200) {
                uni.showToast({
                  title: '删除成功',
                  icon: 'success'
                })
                this.getPatientList()
              } else {
                uni.showToast({
                  title: response.data.message || '删除失败',
                  icon: 'none'
                })
              }
            } catch (error) {
              uni.showToast({
                title: '删除失败',
                icon: 'none'
              })
              console.error(error)
            }
          }
        }
      })
    },
    
    // 获取性别文本
    getGenderText(gender) {
      const genderMap = {
        1: '男',
        2: '女',
        3: '其他'
      }
      return genderMap[gender] || '未知'
    }
  }
}
</script>

<style scoped>
.patient-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.add-btn {
  font-size: 28rpx;
  padding: 10rpx 30rpx;
}

.patient-list {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
}

.loading, .empty {
  text-align: center;
  padding: 100rpx 0;
  color: #999;
  font-size: 28rpx;
}

.patient-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #eee;
}

.patient-item:last-child {
  border-bottom: none;
}

.patient-info {
  flex: 1;
}

.basic-info {
  margin-bottom: 10rpx;
}

.name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-right: 20rpx;
}

.gender, .age {
  font-size: 28rpx;
  color: #666;
  margin-right: 20rpx;
}

.contact-info, .id-info {
  margin-bottom: 5rpx;
}

.phone, .id-card {
  font-size: 26rpx;
  color: #999;
}

.actions {
  display: flex;
  gap: 20rpx;
}

.action-btn {
  font-size: 24rpx;
  padding: 10rpx 20rpx;
}

.edit {
  background-color: #409eff;
  color: #fff;
}

.delete {
  background-color: #f56c6c;
  color: #fff;
}


</style> 